<template>
	<view class="container">
		<view class="main">
			<image class="title" mode="aspectFit" src="../../static/ai/ai-title.png"></image>
			<image class="rebot" mode="aspectFit" src="../../static/ai/rebot.png"></image>
			<view class="notes">我可以帮你搜索、答疑、编程、分析、写作, 还能提建议, 请把任务交给我吧...</view>
			<view class="ai-list">
				<view v-for="(item, key) in aiList" :key="key" :class="{item: true, active: item.id == ai}"
					@click="switchAi(key)">{{ item.name }}</view>
			</view>
			<view class="model-list">
				<template v-if="aiList[aiIndex].model.length">
					<navigator v-for="(item, key) in aiList[aiIndex].model" :key="key" class="item"
						:url="'/pages/ai/' + ai + '?model=' + item.id + '&name=' + item.name">
						<image class="logo" mode="aspectFill" :src="'../../static/ai/'+ai+'.png'"></image>
						{{ item.name }}
					</navigator>
				</template>
				<view v-else class="item">暂未开通</view>
			</view>
		</view>
		<view class="ewm-container">
			<view class="ewm-box">
				<image class="ewm" mode="aspectFill" :src="'../../static/ai/lebo.png'"></image>
				<span>扫码投屏app</span>
			</view>
			<view class="ewm-box">
				<image class="ewm" mode="aspectFill" :src="'../../static/ai/wechat.png'"></image>
				<span>扫码投票app</span>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				aiList: [{
						name: 'DeepSeek',
						id: 'deepseek',
						model: [{
							name: 'DeepSeek-r1-360高速专线',
							id: 'deepseek-chat'
						}]
					},
					{
						name: '文心一言',
						id: 'yiyan',
						model: [{
							name: 'ERNIE 4.5',
							id: 'ernie-4.5-8k-preview'
						}]
					},
					{
						name: '纳米AI',
						id: 'nami',
						model: [{
							name: '360gpt2-pro',
							id: '360gpt2-pro'
						}]
					},
					{
						name: '豆包',
						id: 'doubao',
						model: [{
							name: 'doubao-1.5-pro-32k',
							id: 'doubao-1-5-pro-32k-250115'
						}]
					},
					{
						name: 'KiMi',
						id: 'kimi',
						model: [{
							name: 'moonshot-v1-128k',
							id: 'moonshot-v1-128k'
						}]
					}
				],
				aiIndex: 0,
				ai: 'deepseek'
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		onLoad() {

		},
		methods: {
			switchAi(index) {
				this.ai = this.aiList[index].id
				this.aiIndex = index
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-image: url('/static/ai/bg.png');
		background-size: cover;
		background-position: center;
		height: 100vh;
	}

	.main {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			margin-top: 163rpx;
			width: 696rpx;
			height: 120rpx;
		}

		.rebot {
			margin-top: -28rpx;
			width: 224rpx;
			height: 224rpx;
		}

		.notes {
			color: #666666;
			font-size: 24rpx;
			margin-top: 35rpx;
		}

		.ai-list {
			display: flex;
			justify-content: center;
			margin-top: 54rpx;
			column-gap: 36rpx;

			.item {
				border-radius: 4rpx;
				padding: 11rpx 18rpx;
				font-size: 24rpx;
				background-color: #D8E5FF;
				color: #3577F5;

				&.active {
					background-color: #3375F5;
					color: #FFFFFF;
				}
			}
		}

		.model-list {
			display: flex;
			justify-content: flex-start;
			margin-top: 30rpx;
			column-gap: 36rpx;

			.item {
				border-radius: 4rpx;
				background-color: #F0F0F0;
				padding: 10rpx 18rpx;
				font-size: 22rpx;
				color: #666666;
				display: flex;
				align-items: center;

				.logo {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}
			}
		}
	}

	.ewm-container {
		position: absolute;
		right: 154rpx;
		bottom: 53rpx;
		display: flex;
		column-gap: 52rpx;

		.ewm-box {
			display: flex;
			flex-direction: column;
			align-items: center;

			.ewm {
				width: 120rpx;
				height: 120rpx;
				background-color: #D9D9D9;
			}

			span {
				margin-top: 15rpx;
				font-size: 18rpx;
				color: #666666;
			}

			;
		}


	}
</style>